<template>
	<view>
		<view class="head-bgc">
			<view class="h-tit-1">师兄师姐帮帮忙</view>
			<view class="h-tit-2">十万校友职业互助问答</view>
		</view>
		<view class="da-ting">师弟师妹在打听</view>
		<view class="help-box">
			<view v-for="(item,index) in list" :key="index" class="item-box">
				<view class="dt-box">
					<view class="box-img">
						<image :src="item.img" @click="clickImg()"></image>
					</view>
					<navigator url="./wenda_details">
						<view class="info-tit">{{ item.info }}</view>
					</navigator>
				</view>
				<view class="hd-dz">
					<text style="margin-right: 25upx;">36回答</text>
					<text>236赞</text>
				</view>
			</view>
		</view>
		<view class="bot-btn">
			<navigator url="dynamic" class="btn-box">
				<image src="../../static/jhy.png" mode=""></image>
				<text>发打听</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						img:'../../static/logo.png',
						info:'运营有哪些方式来说服逻辑辩证能力很强的产品经理？',
					},{
						img:'../../static/logo.png',
						info:'运营有哪些方式来说服逻辑辩证能力很强的产品经理？',
					},{
						img:'../../static/logo.png',
						info:'运营有哪些方式来说服逻辑辩证能力很强的产品经理？',
					},{
						img:'../../static/logo.png',
						info:'运营有哪些方式来说服逻辑辩证能力很强的产品经理？',
					}
				]
			}
		},
		methods: {
			clickImg() {
				uni.previewImage({
					urls: ["../../static/logo.png",],
					current: '',
					indicator:'default'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head-bgc{
		color: #FFFFFF;
		height: 318upx;
		text-align: center;
		background: #3291F8;
		.h-tit-1{
			font-size: 52upx;
			padding: 94upx 0 20upx 0;
		}
		.h-tit-2{
			font-size: 24upx;
		}
	}
	.da-ting{
		width: 196upx;
		color: #101010;
		font-size: 28upx;
		font-weight: bold;
		padding-bottom: 20upx;
		margin: 84upx 0 0 30upx;
		border-bottom: 6upx solid #3291F8;
	}
	.help-box{
		padding-bottom: 120upx;
		.item-box{
			padding: 38upx 54upx 30upx 26upx;
			.dt-box{
				display: flex;
				.box-img{
					image{
						width: 90upx;
						height: 90upx;
					}
				}
				.info-tit{
					color: #101010;
					font-size: 28upx;
					margin: 6upx 0 0 48upx;
				}
			}
			.hd-dz{
				color: #8B8D92;
				font-size: 24upx;
				margin-left: 138upx;
			}
		}
	}
	.bot-btn{
		width: 100%;
		height: 96upx;
		display: flex;
		padding: 14upx 0;
		background: #FFFFFF;
		justify-content: center;
		border-top: 2upx solid #F0F0F0;
		position: fixed;
		bottom: 0;
		left: 0;
		.btn-box{
			height: 68upx;
			width: 220upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2upx solid #E8E8E8;
			border-radius: 40upx;
			background: #FFFFFF;
			image{
				width: 40upx;
				height: 40upx;
				margin-right: 10upx;
			}
			text{
				color: #6A6A6A;
				font-size: 26upx;
			}
		}
	}
</style>
